<template>
  <ul class="account-menu border-bottom-1px">
    <li @click="clickCreate" :class="{'active': current === 0}">{{ create }}</li>
    <li @click="clickConsume" :class="{'active': current === 1}">{{ consume }}</li>
    <li @click="clickTransfer" :class="{'active': current === 2}">{{ transfer }}</li>
    <li @click="clickRefill" :class="{'active': current === 3}">{{ refill }}</li>
    <li @click="clickLog" :class="{'active': current === 4}">{{ log }}</li>
  </ul>
</template>

<script>
export default {
  name: 'AccountMenu',
  props: {
    create: {
      type: String,
      default: '获取'
    },
    consume: {
      type: String,
      default: '消费'
    },
    transfer: {
      type: String,
      default: '互转'
    },
    refill: {
      type: String,
      default: '充值'
    },
    log: {
      type: String,
      default: '明细'
    },
    current: {
      type: Number,
      default: 0
    }
  },
  methods: {
    clickCreate() {
      this.$emit('clickCreate')
    },
    clickConsume() {
      this.$emit('clickConsume')
    },
    clickTransfer() {
      this.$emit('clickTransfer')
    },
    clickRefill() {
      this.$emit('clickRefill')
    },
    clickLog() {
      this.$emit('clickLog')
    }
  }
}
</script>

<style scoped lang="stylus">
.account-menu
  height 50px
  line-height 50px
  background white
  display flex
  justify-content center
  li
    padding 0 20px
    &.active
      color red
      font-weight 700
</style>
